<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>系统中心</el-breadcrumb-item>
          <el-breadcrumb-item>工序管理</el-breadcrumb-item>
          <el-breadcrumb-item>工序编辑</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>工序编辑</span>
            <el-button style="float: right; padding: 3px 0" icon="el-icon-close" circle @click="back"></el-button>
            <el-button style="float: right; padding: 3px 50px" type="text" @click="" el-icon-close @click="addProcess">保存</el-button>
          </div>
          <el-form :model="process" :rules="processRules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-row :gutter="20">
              <el-col :span="10">
                <el-form-item label="工序名称" prop="name">
                  <el-input v-model="process.name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="收费方式" prop="ctype">
                  <template>
                    <el-select v-model="process.ctype" placeholder="请选择收费方式">
                      <el-option
                        key="0"
                        label="按时收费"
                        :value="0">
                      </el-option>
                      <el-option
                        key="0"
                        label="按件收费"
                        :value="1">
                      </el-option>
                    </el-select>
                  </template>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="10">
                <el-form-item label="单价" prop="price" >
                  <el-input v-model="process.price"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="准备工时单价" prop="prePrice">
                  <el-input v-model="process.prePrice"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="20">
                <el-form-item label="描述" prop="remarks" >
                  <div style="margin: 20px 0;"></div>
                  <el-input
                    type="textarea"
                    placeholder="请输入内容"
                    v-model="process.remarks"
                    maxlength="30"
                    show-word-limit
                  >
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </div>
</template>

<script>
  export default {
    name: 'AddProcess',
    data(){
      return{
        process:{
          id:'',
          name:'',
          code:'',
          ctype:'',
          price:'',
          prePrice:'',
          remarks:'',
        },
        options:[

        ],
        processRules:{
          name: [
            { required: true, message: '请输入名称', trigger: 'blur' }
          ],
          price: [
            { required: true, message: '请输入单价', trigger: 'blur' }
          ],
          prePrice: [
            { required: true, message: '请输入及时单价', trigger: 'blur' }
          ],
          remarks: [
            { required: true, message: '请输入描述', trigger: 'blur' }
          ],
          ctype: [
            { required: true, message: '请选择收费方式', trigger: 'blur' }
          ],
        }
      }
    },
    methods:{
      back:function () {
        this.$router.push('/processList');
      },
      addProcess:function () {
        this.$refs['ruleForm'].validate((valid) => {
          if (!valid) {
            return
          }
          this.$http.post("/process/saveProcess", this.process).then((res) => {
            this.$message.success(res.data.message);
            this.$router.push('/processList')
            }
          )
        })
      },

    }
  }
</script>

<style scoped>

  .el-col {
    border-radius: 4px;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 1000px;
  }
</style>
